<template>
  <div class="timeTypeOpt">
    <div style="margin-top: 8px; text-align: left; display: flex; align-items:center;" class="concern_cost_item">
      <span>姓名：</span><span>{{ item.real_name }}</span>
    </div>
    <div style="margin-top: 8px; text-align: left; display: flex; align-items:center;" class="concern_cost_item">
      <!--  false为女，true为男    -->
      <span>性别：</span><span>{{ item.gender ? '男' : '女' }}</span>
    </div>
    <div style="margin-top: 8px; text-align: left; display: flex; align-items:center;" class="concern_cost_item">
      <span>手机号码：</span><span>{{ item.mobile }}</span>
      <van-button
        style="margin-left: 16px; padding: 3px" plain type="info"
        @click.stop="phoneContact(item.mobile)"
      >电话联系</van-button>
    </div>
    <div style="margin-top: 8px; text-align: left; display: flex; align-items:center;" class="concern_cost_item">
      <span>身份证号：</span><span>{{item.card_id}}</span>
    </div>
    <div style="margin-top: 8px; text-align: left;display: flex; align-items:center;" class="concern_cost_item">
      <span>下游合作费：</span>
      <span>{{ item.downstream_cooperation_fee || '' }}</span>
      <span style="margin-left: 3px;">{{ feeUnitObj[item.cooperation_fee_unit]}}</span>
    </div>


   <!--  若原公司发布时，选择的合作费的单位为：2: '元 / 人', 则也需要显示工作时长的输入框 -->
    <div
      style="margin-top: 8px; text-align: left; display: flex; align-items:center; color: #007aff; font-weight: bold;"
      class="concern_cost_item"
    >
      <span>(待支付)工作时长：</span>
      <!--    type == 2 为收到的合作费页面  -->
      <span v-show="type == 2">
        {{ item.work_duration ? item.work_duration: ''   }}
        <span style="margin-left: 3px;">{{ timeTypeList[item.cooperation_fee_unit] }}</span>
      </span>

      <!--    type == 3 为支付的合作费页面  -->
      <span v-show="type == 3">
        <input
          type="tel"
          @click.stop
          v-model="working_duration_time"
          style="width: 56px; height: 28px;"
          placeholder="请先输入"
        />
        <span style="margin-left: 6px;">{{ timeTypeList[item.cooperation_fee_unit] }}</span>
        <van-button
          style="margin-left: 3px; padding: 3px 10px"
          type="info"
          size="large"
          @click.stop="submitWorkingDuration(item.job_user_id)"
        >
          提交
        </van-button>
      </span>
    </div>


    <div style="margin-top: 8px; text-align: left ;display: flex; align-items:center; color: red; font-weight: bold; " class="concern_cost_item">
      <span>(待支付)合作费：</span><span>{{ `${item.cooperation_money ? (item.cooperation_money + ' 元') : '暂无'}` }} </span>
      <van-button @click.stop="toPayRecord" style="margin-left: 16px; padding: 3px" plain type="info">
        {{type == 2 ? '收到记录' : '支付记录' }}
      </van-button>
    </div>

    <div style="margin-top: 8px; text-align: left; display: flex; align-items:center;" class="concern_cost_item">
      <span>{{ type == 2 ? '【最近已收到的】时间：' : '【最近已支付的】时间：' }}</span>
      <span>{{ item.cooperation_pay_time || '' }}</span>
    </div>


    <div style="margin-top: 8px; text-align: left; display: flex; align-items:center;" class="concern_cost_item">
      <span>{{ type == 2 ? '【最近已结算的】工作时长：' : '【最近已支付的】工作时长：' }}</span>
      <span>{{ item.latest_work_duration || '0' }}<span style="margin-left: 3px; ">{{ timeTypeList[item.cooperation_fee_unit] }}</span></span>
    </div>


    <div style="margin-top: 8px; text-align: left; display: flex; align-items:center;" class="concern_cost_item">
      <span>{{ type == 2 ? '【最近已收到的】合作费：' : '【最近已支付的】合作费：' }}</span>
      <span>{{ item.latest_cooperation_money || '0' }}<span style="margin-left: 3px; ">元</span></span>
    </div>






    <!--  todo 页面太多，数据混乱， 暂时不做  -->
<!--    <div style="margin-top: 6px; text-align: left; display: flex; align-items:center;" class="concern_cost_item">
      <span>{{ '转发前的员工信息' }} :</span>
      <van-button @click.stop="toPayRecord" style="margin-left:5px;" plain type="info">报名信息</van-button>
      <van-button @click.stop="toPayRecord" style="margin-left:5px;" plain type="info">工作信息</van-button>
      <van-button @click.stop="toPayRecord" style="margin-left:5px;" plain type="info">借支信息</van-button>
      <van-button @click.stop="toPayRecord" style="margin-left:5px;" plain type="info">工资信息</van-button>
    </div>
    <div style="margin-top: 6px; text-align: left; display: flex; align-items:center;" class="concern_cost_item">
      <span>{{ '转发后的员工信息' }} :</span>
      <van-button @click.stop="toPayRecord" style="margin-left:5px;" plain type="info">报名信息</van-button>
      <van-button @click.stop="toPayRecord" style="margin-left:5px;" plain type="info">工作信息</van-button>
      <van-button @click.stop="toPayRecord" style="margin-left:5px;" plain type="info">借支信息</van-button>
      <van-button @click.stop="toPayRecord" style="margin-left:5px;" plain type="info">工资信息</van-button>
    </div>-->
  </div>
</template>
<script>
import {feeUnitObj} from "../../../../constants/comUtils";
import {Toast} from "vant";

export default {
  props: {
    item: {
      type: Object,
      default() {
        return {}
      }
    },
    selectedSharedJobId: String,
  },
  data() {
    return {
      feeUnitObj,
      timeTypeList: ['小时', '个月', '每人', '天'],
      type: this.$route.query.type,
    }
  },


  computed: {
    working_duration_time: {
      get(){
        return this.item.work_duration;
      },
      set(val){
        console.log('在computed里面---修改工作时长', val);
        this.item.work_duration = val;
        // 一般来说父组件prop传递过来的值，不能直接被修改，但是有特殊情况。请查看下列文档
        // https://www.cnblogs.com/pangchunlei/p/11139356.html
        // this.$emit('getChangeValue', val)
      },
    },
  },

  methods: {
    phoneContact(tel) {
      window.location.href = `tel:${tel}`
    },
    toPayRecord() {
      const {type} = this;
      console.log('type', type)
      // todo 与钱包记录耦合导致逻辑混乱，注释by刘晓玲，后续需求实现请联系刘晓玲帮忙开发
      this.$router.push({
        name: 'getOrPayFeeRecord',
        query: {
          type,
          // 已转发后的职位id
          JobId: this.selectedSharedJobId,
          // 员工id
          JobUserId: this.item.job_user_id,
        }
      })
    },
    // 提交工作时长
    submitWorkingDuration(job_user_id) {
      const patter = /^[0-9]+(\.[0-9]{0,2})?$/;
      if(!patter.test(this.working_duration_time)){
        Toast('最多只能输入带有2位小数的正数');
        return null
      };

      if(this.working_duration_time <= 0){
        Toast('输入的数必须大于0');
        return null
      };

      const paramsObj = {
        // 已转发后的职位id
        JobId: this.selectedSharedJobId,
        // 员工id
        JobUserId: job_user_id,
        workDuration: this.working_duration_time,
      };
      // 跨组件通信，使用bus总线。
      this.$bus.$emit('getWorkload', paramsObj);
    }
  }
}
</script>
<style lang="scss">
.timeTypeOpt {
  font-size: 11px;
  .van-button {
    padding: 0;
    height: auto;
    width: auto;
    font-size: 0.34667rem;
    span {
      margin: 0;
    }
  }
}
</style>
